<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
body,html {
    height: 100%;
}
#box {
    height: 100%;
    overflow-y: scroll;
}
</style>
<body>
    <div id="box">
        <p>第1个p标签</p>
        <p>第2个p标签</p>
        <p>第3个p标签</p>
        <p>第4个p标签</p>
        <p>第5个p标签</p>
        <p>第6个p标签</p>
        <p>第7个p标签</p>
        <p>第8个p标签</p>
        <p>第9个p标签</p>
        <p>第10个p标签</p>
        <p>第11个p标签</p>
        <p>第12个p标签</p>
        <p>第13个p标签</p>
        <p>第14个p标签</p>
        <p>第15个p标签</p>
        <p>第16个p标签</p>
        <p>第17个p标签</p>
        <p>第18个p标签</p>
        <p>第19个p标签</p>
        <p>第20个p标签</p>
        <p>第21个p标签</p>
        <p>第22个p标签</p>
        <p>第23个p标签</p>
        <p>第24个p标签</p>
        <p>第25个p标签</p>
        <p>第26个p标签</p>
        <p>第27个p标签</p>
        <p>第28个p标签</p>
        <p>第29个p标签</p>
        <p>第30个p标签</p>
        <p>第31个p标签</p>
        <p>第32个p标签</p>
        <p>第33个p标签</p>
        <p>第34个p标签</p>
        <p>第35个p标签</p>
        <p>第36个p标签</p>
        <p>第37个p标签</p>
        <p>第38个p标签</p>
        <p>第39个p标签</p>
        <p>第40个p标签</p>
        <p>第41个p标签</p>
        <p>第42个p标签</p>
        <p>第43个p标签</p>
        <p>第44个p标签</p>
        <p>第45个p标签</p>
        <p>第46个p标签</p>
        <p>第47个p标签</p>
        <p>第48个p标签</p>
        <p>第49个p标签</p>
        <p>第50个p标签</p>
    </div>
</body>
<script>
document.getElementById('box').onscroll = function(){
    console.log('box滚动了')
}
document.body.onscroll = function(){
    console.log('body滚动了')
}
</script>
</html>